<template>
    <div class="main">
        <div style="width: calc(100% - 20px); height: 100%; margin: 0 auto; position: relative;">
            <div style="height: 60px;">
                <div style="width: 300px; float: left;" >
                    <hu-select-dict v-model="datasourceId" :selectDic="datasorceList" title="数据源" search/>
                </div>
                <div style="width: 300px; float: left;" >
                    <hu-input v-model="tableName" title="表名称"/>
                </div>
                <div class="top-button"> 
                    <hu-button @click="catchInfo()" value="获取" size="big"/>&nbsp;&nbsp;
                    <hu-button v-if="tableInfo.value.length > 0"  @click="addField()" value="新增表字段" size="big"/>
                </div>
            </div>
            <hu-table 
                ref="table" 
                v-model="tIndex" 
                :tableInfo="tableInfo" 
                height-reduce="60px"
                option-width="160" notOption checkbox>
            </hu-table>
            <hu-dialog title="新增字段" top="20%" ref="addFieldDialogOpen" width="700px" @hu-dialog="addFieldResultDialog">
                <hu-input v-model="info.fieldName" title="字段名"/>
                <hu-input v-model="info.fieldType" title="字段类型"/>
                <hu-input v-model="info.fieldComment" title="字段注释"/>
                <hu-input-bool v-model="info.fieldIsNull" title="是否为空" true-key="可为空" false-key="不为空"/>
                <hu-input-bool v-model="info.isCover" title="是否覆盖" true-key="覆盖" false-key="不覆盖"/>
            </hu-dialog>
            <hu-dialog title="SQL" top="15%" ref="sqlDialogOpen" width="60vw" @hu-dialog="sqlResultDialog">
                <div style="height: 55vh;margin-bottom: 7px;">
                    <hu-editor v-model="sqlData" :mode="editorMode"/>
                </div>
            </hu-dialog>
        </div>
        <div v-if="loading" style="width: 100%;height: 150px; position: relative;">
            <hu-loading type="circular" />
        </div>
    </div>
</template>
<script>
import "@/assets/styles/base.scss"
import { selectDataSourceList } from '@/api/datasource'
import { selectBaseInfoList } from '@/api/base'
import { addField } from '@/api/field'
import { isEmpty, isEmptyOfForm } from '@/utils/validate'
export default {
    name: '新增表字段',
    components: {

    },
    mixins: [],
    props: [

    ],
    data() {
        return {
            editorMode: 'sql',
            sqlData: "",
            datasourceId: null,
            tableName: null,
            tableType: 'BASE TABLE',
            loading: true,
            tIndex: [],
            tableInfo: {
                title: [
                    {
                        value: 'tableSchema',
                        label: '库名',
                        width: '280'
                    }, {
                        value: 'tableName',
                        label: '表名',
                        width: '310'
                    }, {
                        value: 'tableType',
                        label: '表类型',
                        width: '150'
                    }
                    , {
                        value: 'tableComment',
                        label: '表注释',
                        width: '340'
                    },
                ],
                value: []
            },
            info: {
                tableNames: [],
                fieldName: null,
                fieldType: null,
                fieldIsNull: 1,
                fieldComment: null,
                // characterSet: null,
                // collate: null,
                isCover: 1,
            },
            datasorceList: [],
            characterSetList:[],
            collateList:[]
        }
    },
    computed: {

    },
    created() {
        
    },
    mounted() {
        this.selectDataSourceList();
        this.selectList()
        this.clearFormData()
    },
    watch: {

    },
    methods: {
        selectDataSourceList() {
            selectDataSourceList().then((res) => {
                let list = res.data.data
                let arr = []
                for(let item of list) {
                    let obj = {
                        value: item.id,
                        label: item.name
                    }
                    arr.push(obj)
                }
                this.datasorceList = arr
            }).catch((error) => {
                this.$huTip({ type: "error", value: error })
            })
        },
        selectList() {
            this.loading = false
        },
        catchInfo() {
            if(this.datasourceId == null) {
                this.$huTip({ type: 'warning', value: "请选择数据源" })
            } else {
                this.loading = true
                selectBaseInfoList(this.datasourceId, this.tableName, this.tableType).then((res) => {
                    this.loading = false
                    this.tableInfo.value = res.data.data
                }).catch((error => {
                    this.loading = false
                    this.$huTip({ type: 'error', value: error })
                }))
            }
        },
        addField() {
            this.clearFormData()
            if(isEmpty(this.tIndex)) {
                this.$huTip({ type: 'warning', value: "至少选择一条数据" })
                return
            }
            if(isEmpty(this.datasourceId)) {
                this.$huTip({ type: 'warning', value: "请选择数据源" })
                return
            }
            this.$refs.addFieldDialogOpen.openDialog()
        },
        sqlResultDialog(val) {
            if(!val) {
                this.sqlData = ""
            } else {
                this.sqlData = ""
                console.log("已确认")
            }
        },
        addFieldResultDialog(val) {
            let formInfo = this.info
            formInfo.datasourceId = this.datasourceId
            formInfo.tableNames = this.getTableNameWithIndex()
            if(!val) {
                this.clearFormData()
                this.resetChecked()
                return
            } else if (!isEmptyOfForm(formInfo)) {
                addField(formInfo).then((res) => {
                    this.$refs.addFieldDialogOpen.closeDialog()
                    this.clearFormData()
                    let data = res.data.data
                    if(!isEmpty(data)) {
                        for(let sql of data) {
                            this.sqlData = this.sqlData + sql + "\n"
                        }
                        this.$refs.sqlDialogOpen.openDialog()
                    } else {
                        this.$huTip({ type: 'warning', value: "返回值为空" })
                    }
                }).catch((error) => {
                    this.clearFormData()
                    this.$huTip({ type: 'error', value: error })
                })
            } else {
                this.clearFormData()
                this.$huTip({ type: 'warning', value: "表单中有未填写的空项" })
                return
            }
        },
        getTableNameWithIndex() {
            let tableName = []
            for(let index of this.tIndex) {
                tableName.push(this.tableInfo.value[index].tableName)
            }
            return tableName
        },
        clearData() {
            this.sqlData = null
            this.clearFormData()
        },
        clearFormData() {
            for(let key in this.info) {
                if(key == 'fieldIsNull' || key == 'isCover') {
                    this.info[key] = 1
                } else {
                    this.info[key] = null
                }
                
            }
        },
        resetChecked() {
            this.tIndex = []
            this.$refs.table.resetChecked()
        }
    },
}
</script>
<style lang="scss" scoped>
.main {
    box-sizing: unset;
    position: relative;
}
.top-button{
    float: left;
    margin-top: 18px;
    margin-left: 10px;
}
</style>